<template>
  <div>
    <Form :label-width="120">
      <FormItem label="名称">
        <Tooltip content="系列名称，用于tooltip的显示" :max-width="200" placement="top">
          <Input size="small" v-model="obj.name"/>
        </Tooltip>
      </FormItem>
      <FormItem label="数据源对应值">
        <Input size="small" v-model="obj.datasourceKey" placeholder="datasourceKey"/>
      </FormItem>
      <FormItem label="层级">
        <InputNumber size="small" :max="100" :min="0" v-model="obj.zlevel"></InputNumber>
      </FormItem>

      <Collapse :style="{marginTop: '5px'}">
        <Panel name="2">
          气泡样式配置
          <div slot="content">
            <FormItem label="图形">
              <Select :transfer="true" size="small" v-model="obj.symbol">
                <Option v-for="item in $PnChartDict.symbols" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
            <!--<FormItem label="大小">
              <InputNumber size="small" :max="1000" :min="0" v-model="obj.symbolSize"></InputNumber>
            </FormItem>-->
            <FormItemPanel title="气泡大小回调函数">
              <Alert style="padding: 8px; text-align: justify;">
                其中第一个参数value为data中的数据值，第二个参数params是其它的数据项参数
              </Alert>
              <CodeEditor v-model="obj.symbolSizeCallbackFuncCode"></CodeEditor>
            </FormItemPanel>
            <FormItemPanel title="图形位置偏移">
              <Alert style="padding: 8px; text-align: justify;">
                可以是正负数值，也可以以百分比的形式
              </Alert>
              <FormItem label="横向偏移">
                <Input size="small" v-model="obj.symbolOffset[0]"/>
              </FormItem>
              <FormItem label="纵向偏移">
                <Input size="small" v-model="obj.symbolOffset[1]"/>
              </FormItem>
            </FormItemPanel>
            <FormItemPanel title="默认状态">
              <FormItem label="颜色">
                <PnColorPicker size="small" v-model="obj.itemStyle.color" alpha recommend/>
              </FormItem>
              <FormItem label="边框颜色">
                <PnColorPicker size="small" v-model="obj.itemStyle.borderColor" alpha recommend/>
              </FormItem>
              <FormItem label="边框大小">
                <InputNumber size="small" :max="100" :min="0" v-model="obj.itemStyle.borderWidth"></InputNumber>
              </FormItem>
              <FormItem label="边框类型">
                <Select :transfer="true" size="small" v-model="obj.itemStyle.borderType">
                  <Option v-for="item in $PnDict.borderStyles" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
              </FormItem>
              <FormItem label="阴影大小">
                <InputNumber size="small" :max="100" :min="0" v-model="obj.itemStyle.shadowBlur"></InputNumber>
              </FormItem>
              <FormItem label="阴影颜色">
                <PnColorPicker size="small" v-model="obj.itemStyle.shadowColor" alpha recommend/>
              </FormItem>
            </FormItemPanel>
            <FormItemPanel title="高亮状态">
              <FormItem label="颜色">
                <PnColorPicker size="small" v-model="obj.emphasis.itemStyle.color" alpha recommend/>
              </FormItem>
              <FormItem label="边框颜色">
                <PnColorPicker size="small" v-model="obj.emphasis.itemStyle.borderColor" alpha recommend/>
              </FormItem>
              <FormItem label="边框大小">
                <InputNumber size="small" :max="100" :min="0" v-model="obj.emphasis.itemStyle.borderWidth"></InputNumber>
              </FormItem>
              <FormItem label="边框类型">
                <Select :transfer="true" size="small" v-model="obj.emphasis.itemStyle.borderType">
                  <Option v-for="item in $PnDict.borderStyles" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
              </FormItem>
              <FormItem label="阴影大小">
                <InputNumber size="small" :max="100" :min="0" v-model="obj.emphasis.itemStyle.shadowBlur"></InputNumber>
              </FormItem>
              <FormItem label="阴影颜色">
                <PnColorPicker size="small" v-model="obj.emphasis.itemStyle.shadowColor" alpha recommend/>
              </FormItem>
            </FormItemPanel>
          </div>
        </Panel>

        <Panel name="3">
          文本标签
          <div slot="content">
            <FormItem label="显示标签">
              <i-switch v-model="obj.label.show">
                <span slot="open"></span>
                <span slot="close"></span>
              </i-switch>
            </FormItem>
            <FormItem label="标签位置">
              <Select :transfer="true" size="small" v-model="obj.label.position">
                <Option v-for="item in $PnChartDict.scatterLabelPositions" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
            <FormItem label="距离图形距离">
              <Tooltip content="当标签位置为top、insideRight等的时候有效" max-width="200" placement="top">
                <InputNumber size="small" :max="100" :min="0" v-model="obj.label.distance"></InputNumber>
              </Tooltip>
            </FormItem>
            <FormItem label="旋转角度">
              <InputNumber size="small" :max="90" :min="-90" v-model="obj.label.rotate"></InputNumber>
            </FormItem>
            <!--<FormItemPanel title="格式化">
              <Input size="small" type="textarea" rows="4" v-model="obj.label.formatter" placeholder=""/>
            </FormItemPanel>-->
            <FormItemPanel title="格式化">
              <CodeEditor v-model="obj.label.labelFormatterCallbackFuncCode"></CodeEditor>
            </FormItemPanel>
            <FormItem label="字体颜色">
              <PnColorPicker size="small" v-model="obj.label.color" alpha recommend/>
            </FormItem>
            <FormItem label="字号">
              <InputNumber size="small" :max="1000" :min="0" v-model="obj.label.fontSize"></InputNumber>
            </FormItem>
            <FormItem label="文字水平对齐">
              <Select :transfer="true" size="small" v-model="obj.label.align">
                <Option value="left">left</Option>
                <Option value="center">center</Option>
                <Option value="right">right</Option>
              </Select>
            </FormItem>
            <FormItem label="文字垂直对齐">
              <Select :transfer="true" size="small" v-model="obj.label.verticalAlign">
                <Option value="top">top</Option>
                <Option value="middle">middle</Option>
                <Option value="bottom">bottom</Option>
              </Select>
            </FormItem>
            <FormItem label="行高">
              <InputNumber size="small" :max="1000" :min="0" v-model="obj.label.lineHeight"></InputNumber>
            </FormItem>
            <FormItem label="背景色">
              <PnColorPicker size="small" v-model="obj.label.backgroundColor" alpha recommend/>
            </FormItem>
            <FormItem label="边框颜色">
              <PnColorPicker size="small" v-model="obj.label.borderColor" alpha recommend/>
            </FormItem>
            <FormItem label="边框大小">
              <InputNumber size="small" :max="1000" :min="0" v-model="obj.label.borderWidth"></InputNumber>
            </FormItem>
            <FormItem label="边框圆角">
              <InputNumber size="small" :max="1000" :min="0" v-model="obj.label.borderRadius"></InputNumber>
            </FormItem>
            <FormItem label="内边距">
              <InputNumber size="small" :max="1000" :min="0" v-model="obj.label.padding"></InputNumber>
            </FormItem>
            <FormItem label="阴影颜色">
              <PnColorPicker size="small" v-model="obj.label.shadowColor" alpha recommend/>
            </FormItem>
            <FormItem label="阴影大小">
              <InputNumber size="small" :max="1000" :min="0" v-model="obj.label.shadowBlur"></InputNumber>
            </FormItem>
            <FormItemPanel title="自定义富文本样式">
              <Alert style="padding: 8px;">
                <a href="https://echarts.apache.org/next/zh/option.html#series-effectScatter.label.rich" target="_blank">参考资料</a>
              </Alert>
              <CodeEditor v-model="labelRichData" mode="json" @on-submit-change="updateLabelRich"></CodeEditor>
            </FormItemPanel>
          </div>
        </Panel>
        <Panel name="4">
          提示信息(Tooltip)配置
          <div slot="content">
            <FormItem label="显示位置">
              <Select :transfer="true" size="small" v-model="obj.tooltip.position">
                <Option value="inside">inside</Option>
                <Option value="top">top</Option>
                <Option value="left">left</Option>
                <Option value="right">right</Option>
                <Option value="bottom">bottom</Option>
              </Select>
            </FormItem>
            <FormItemPanel title="格式化">
              <Alert style="padding: 8px;">
                通过编写JS回调函数代码对提示框进行自定义，<a href="https://echarts.apache.org/next/zh/option.html#tooltip.formatter" target="_blank">参考资料</a>
              </Alert>
              <CodeEditor v-model="obj.tooltip.tooltipFormatterCallbackFuncCode"></CodeEditor>
            </FormItemPanel>
            <FormItem label="背景颜色">
              <PnColorPicker size="small" v-model="obj.tooltip.backgroundColor" alpha recommend/>
            </FormItem>
            <FormItem label="边框颜色">
              <PnColorPicker size="small" v-model="obj.tooltip.borderColor" alpha recommend/>
            </FormItem>
            <FormItem label="边框大小">
              <InputNumber size="small" :max="1000" :min="0" v-model="obj.tooltip.borderWidth"></InputNumber>
            </FormItem>
            <FormItem label="内边距">
              <InputNumber size="small" :max="1000" :min="0" v-model="obj.tooltip.padding"></InputNumber>
            </FormItem>
          </div>
        </Panel>
        <Panel name="100">
          静态数据
          <div slot="content">
            <CodeEditor v-model="staticData" mode="json" @on-submit-change="updateData"></CodeEditor>
          </div>
        </Panel>
      </Collapse>

    </Form>
  </div>
</template>

<script>
  export default {
    name: "CPMSeriesScatterSettingForm",
    props: {
      value: {
        type: Object
      }
    },
    data() {
      return {
        obj: this.value,
        staticData: null,
        labelRichData: null
      }
    },
    mounted() {
      this.staticData = JSON.stringify(this.obj.data, null, 2);
      this.labelRichData = JSON.stringify(this.obj.label.rich, null, 2)
    },
    methods: {
      updateData () {
        this.obj.data = JSON.parse(this.staticData)
      },
      updateLabelRich () {
        this.obj.label.rich = JSON.parse(this.labelRichData)
      }
    },
    computed: {

    },
    watch: {
      value (val) {
        this.obj = val;
      },
      obj (val) {
        this.$emit('input', val);
      }
    }
  }
</script>

<style scoped>

</style>
